<template>
  <div class="dashboard-container">
    <!-- 页面头部 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="welcome-info">
          <h1 class="welcome-title">
            {{ greeting }}，{{ userInfo.realName || userInfo.username }}！
          </h1>
          <p class="welcome-subtitle">
            欢迎使用科研成果管理系统
          </p>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="navigateTo('/papers/create')">
            <el-icon><Plus /></el-icon>
            添加论文
          </el-button>
        </div>
      </div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-card primary" @click="navigateTo('/vertical-projects/list')">
          <div class="stat-icon">
            <el-icon><Files /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.verticalProjects }}</div>
            <div class="stat-label">纵向课题</div>
          </div>
          <div class="stat-trend">
            <el-icon><TrendCharts /></el-icon>
          </div>
        </div>

        <div class="stat-card success" @click="navigateTo('/horizontal-projects/list')">
          <div class="stat-icon">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.horizontalProjects }}</div>
            <div class="stat-label">横向课题</div>
          </div>
          <div class="stat-trend">
            <el-icon><TrendCharts /></el-icon>
          </div>
        </div>

        <div class="stat-card info" @click="navigateTo('/papers/list')">
          <div class="stat-icon">
            <el-icon><Reading /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.papers }}</div>
            <div class="stat-label">学术论文</div>
          </div>
          <div class="stat-trend">
            <el-icon><TrendCharts /></el-icon>
          </div>
        </div>

        <div class="stat-card warning" @click="navigateTo('/audit/pending')">
          <div class="stat-icon">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ stats.pendingAudits }}</div>
            <div class="stat-label">待审核</div>
          </div>
          <div class="stat-trend">
            <el-icon><TrendCharts /></el-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="content-grid">
        <!-- 最近活动卡片 -->
        <div class="content-card recent-activities">
          <div class="card-header">
            <div class="header-left">
              <h3 class="card-title">最近提交的成果</h3>
              <p class="card-subtitle">查看最新的科研成果提交</p>
            </div>
            <el-button
              type="primary"
              link
              @click="navigateTo('/vertical-projects/list')"
            >
              查看全部
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>

          <div class="card-body">
            <div v-if="recentItems.length === 0" class="empty-state">
              <div class="empty-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="empty-text">暂无最近提交的成果</div>
              <div class="empty-description">开始添加您的第一个科研成果吧</div>
            </div>
            <div v-else class="recent-items-list">
              <div
                v-for="item in recentItems.slice(0, 5)"
                :key="item.id"
                class="recent-item"
              >
                <div class="item-icon">
                  <el-icon>
                    <component :is="getItemIcon(item.type)" />
                  </el-icon>
                </div>
                <div class="item-content">
                  <div class="item-title">{{ item.title }}</div>
                  <div class="item-meta">
                    <span class="item-type">{{ getItemTypeText(item.type) }}</span>
                    <span class="item-separator">•</span>
                    <span class="item-date">{{ formatDate(item.createTime) }}</span>
                  </div>
                </div>
                <div class="item-status">
                  <el-tag
                    :type="getStatusTagType(item.auditStatus)"
                    size="small"
                    effect="light"
                  >
                    {{ getStatusText(item.auditStatus) }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 快速操作卡片 -->
        <div class="content-card quick-actions">
          <div class="card-header">
            <div class="header-left">
              <h3 class="card-title">快速操作</h3>
              <p class="card-subtitle">常用功能快速入口</p>
            </div>
          </div>

          <div class="card-body">
            <div class="quick-actions-grid">
              <div
                v-if="isStudent"
                class="action-item"
                @click="navigateTo('/vertical-projects/create')"
              >
                <div class="action-icon primary">
                  <el-icon><Files /></el-icon>
                </div>
                <div class="action-content">
                  <div class="action-title">添加纵向课题</div>
                  <div class="action-desc">申请国家级科研项目</div>
                </div>
              </div>

              <div
                v-if="isStudent"
                class="action-item"
                @click="navigateTo('/horizontal-projects/create')"
              >
                <div class="action-icon success">
                  <el-icon><Document /></el-icon>
                </div>
                <div class="action-content">
                  <div class="action-title">添加横向课题</div>
                  <div class="action-desc">企业合作项目申请</div>
                </div>
              </div>

              <div
                v-if="isStudent"
                class="action-item"
                @click="navigateTo('/papers/create')"
              >
                <div class="action-icon info">
                  <el-icon><Reading /></el-icon>
                </div>
                <div class="action-content">
                  <div class="action-title">添加学术论文</div>
                  <div class="action-desc">发表研究成果</div>
                </div>
              </div>

              <div
                v-if="isTeacher"
                class="action-item"
                @click="navigateTo('/audit/pending')"
              >
                <div class="action-icon warning">
                  <el-icon><Check /></el-icon>
                </div>
                <div class="action-content">
                  <div class="action-title">审核管理</div>
                  <div class="action-desc">审核学生提交的成果</div>
                </div>
              </div>

              <div
                v-if="isAdmin"
                class="action-item"
                @click="navigateTo('/user-management/users')"
              >
                <div class="action-icon primary">
                  <el-icon><User /></el-icon>
                </div>
                <div class="action-content">
                  <div class="action-title">用户管理</div>
                  <div class="action-desc">管理系统用户</div>
                </div>
              </div>

              <div
                class="action-item"
                @click="navigateTo('/profile')"
              >
                <div class="action-icon info">
                  <el-icon><Setting /></el-icon>
                </div>
                <div class="action-content">
                  <div class="action-title">个人中心</div>
                  <div class="action-desc">查看和编辑个人信息</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import * as dashboardAPI from '@/api/dashboard'
import {
  Document,
  Clock,
  Plus,
  Check,
  User,
  Files,
  Reading,
  ArrowRight,
  Setting,
  TrendCharts
} from '@element-plus/icons-vue'

export default {
  name: 'ModernDashboard',
  components: {
    Document,
    Clock,
    Plus,
    Check,
    User,
    Files,
    Reading,
    ArrowRight,
    Setting,
    TrendCharts
  },
  setup() {
    const store = useStore()
    const router = useRouter()

    const stats = ref({
      verticalProjects: 0,
      horizontalProjects: 0,
      papers: 0,
      pendingAudits: 0
    })

    const recentItems = ref([])
    const loading = ref(false)

    const userInfo = computed(() => store.getters.userInfo)
    const isStudent = computed(() => store.getters.isStudent)
    const isTeacher = computed(() => store.getters.isTeacher)
    const isAdmin = computed(() => store.getters.isAdmin)

    const greeting = computed(() => {
      const hour = new Date().getHours()
      if (hour < 6) return '深夜好'
      if (hour < 12) return '上午好'
      if (hour < 18) return '下午好'
      if (hour < 22) return '晚上好'
      return '深夜好'
    })

    // 导航到指定路径
    const navigateTo = (path) => {
      router.push(path)
    }

    const loadDashboardData = async () => {
      loading.value = true
      try {
        // 获取统计数据
        const statsResponse = await dashboardAPI.getStats()
        stats.value = statsResponse.data

        // 获取最近项目数据
        const recentResponse = await dashboardAPI.getRecentItems()
        recentItems.value = recentResponse.data.items || []
      } catch (error) {
        console.error('加载仪表板数据失败:', error)
        // 如果API调用失败，使用默认值
        stats.value = {
          verticalProjects: 0,
          horizontalProjects: 0,
          papers: 0,
          pendingAudits: 0
        }
        recentItems.value = []
      } finally {
        loading.value = false
      }
    }

    // 获取项目类型文本
    const getItemTypeText = (type) => {
      const typeMap = {
        vertical: '纵向课题',
        horizontal: '横向课题',
        paper: '学术论文'
      }
      return typeMap[type] || '未知类型'
    }

    // 获取项目类型图标
    const getItemIcon = (type) => {
      const iconMap = {
        vertical: 'Files',
        horizontal: 'Document',
        paper: 'Reading'
      }
      return iconMap[type] || 'Document'
    }

    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        0: '待审核',
        1: '已通过',
        2: '已拒绝',
        PENDING: '待审核',
        APPROVED: '已通过',
        REJECTED: '已拒绝'
      }
      return statusMap[status] || '未知状态'
    }

    // 获取状态样式类
    const getStatusClass = (status) => {
      const classMap = {
        0: 'status-pending',
        1: 'status-approved',
        2: 'status-rejected',
        PENDING: 'status-pending',
        APPROVED: 'status-approved',
        REJECTED: 'status-rejected'
      }
      return classMap[status] || 'status-unknown'
    }

    // 获取状态标签类型
    const getStatusTagType = (status) => {
      const typeMap = {
        0: 'warning',
        1: 'success',
        2: 'danger',
        PENDING: 'warning',
        APPROVED: 'success',
        REJECTED: 'danger'
      }
      return typeMap[status] || 'info'
    }

    // 格式化日期
    const formatDate = (date) => {
      if (!date) return ''
      const d = new Date(date)
      const now = new Date()
      const diff = now - d
      const days = Math.floor(diff / (1000 * 60 * 60 * 24))

      if (days === 0) return '今天'
      if (days === 1) return '昨天'
      if (days < 7) return `${days}天前`
      if (days < 30) return `${Math.floor(days / 7)}周前`
      if (days < 365) return `${Math.floor(days / 30)}个月前`
      return `${Math.floor(days / 365)}年前`
    }

    onMounted(() => {
      loadDashboardData()
    })

    return {
      stats,
      recentItems,
      loading,
      userInfo,
      isStudent,
      isTeacher,
      isAdmin,
      greeting,
      navigateTo,
      getItemTypeText,
      getItemIcon,
      getStatusText,
      getStatusClass,
      getStatusTagType,
      formatDate
    }
  }
}
</script>

<style lang="scss" scoped>
// 现代化仪表盘样式
.dashboard-container {
  min-height: 100vh;
  background: #f8fafc;
  padding: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// 页面头部
.dashboard-header {
  margin-bottom: 32px;

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;

    .welcome-info {
      .welcome-title {
        font-size: 32px;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 8px 0;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .welcome-subtitle {
        font-size: 16px;
        color: #64748b;
        margin: 0;
        font-weight: 400;
      }
    }

    .header-actions {
      :deep(.el-button) {
        height: 40px;
        padding: 0 20px;
        border-radius: 10px;
        font-weight: 500;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        border: none;
        box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.3);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px 0 rgba(99, 102, 241, 0.4);
        }
      }
    }
  }
}

// 统计卡片区域
.stats-section {
  margin-bottom: 32px;

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;

    .stat-card {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border-color: #6366f1;

        &::before {
          opacity: 1;
        }
      }

      &.primary {
        .stat-icon {
          background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
          box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.3);
        }
      }

      &.success {
        .stat-icon {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.3);
        }
      }

      &.info {
        .stat-icon {
          background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
          box-shadow: 0 4px 14px 0 rgba(107, 114, 128, 0.3);
        }
      }

      &.warning {
        .stat-icon {
          background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
          box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.3);
        }
      }

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        .el-icon {
          font-size: 28px;
          color: white;
        }
      }

      .stat-info {
        flex: 1;
        margin-left: 16px;

        .stat-number {
          font-size: 28px;
          font-weight: 700;
          color: #1e293b;
          line-height: 1;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 14px;
          font-weight: 500;
          color: #64748b;
        }
      }

      .stat-trend {
        color: #10b981;
        opacity: 0.7;
        transition: opacity 0.3s ease;

        .el-icon {
          font-size: 20px;
        }
      }

      &:hover .stat-trend {
        opacity: 1;
      }
    }
  }
}

// 主要内容区域
.main-content {
  .content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;

    .content-card {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
      }

      .card-header {
        padding: 24px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .header-left {
          .card-title {
            font-size: 20px;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 4px 0;
          }

          .card-subtitle {
            font-size: 14px;
            color: #64748b;
            margin: 0;
          }
        }

        :deep(.el-button) {
          &.el-button--primary.is-link {
            color: #6366f1;
            font-weight: 500;

            &:hover {
              color: #4f46e5;
            }
          }
        }
      }

      .card-body {
        padding: 24px;

        .empty-state {
          text-align: center;
          padding: 40px 20px;

          .empty-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 16px;
            background: #f1f5f9;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            .el-icon {
              font-size: 32px;
              color: #94a3b8;
            }
          }

          .empty-text {
            font-size: 16px;
            color: #64748b;
            font-weight: 500;
            margin-bottom: 8px;
          }

          .empty-description {
            font-size: 14px;
            color: #94a3b8;
          }
        }

        .recent-items-list {
          .recent-item {
            display: flex;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #f1f5f9;
            transition: all 0.2s ease;

            &:last-child {
              border-bottom: none;
            }

            &:hover {
              background: #f8fafc;
              margin: 0 -24px;
              padding: 16px 24px;
              border-radius: 8px;
            }

            .item-icon {
              width: 40px;
              height: 40px;
              background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 12px;
              flex-shrink: 0;

              .el-icon {
                font-size: 18px;
                color: white;
              }
            }

            .item-content {
              flex: 1;

              .item-title {
                font-size: 15px;
                font-weight: 500;
                color: #1e293b;
                margin-bottom: 4px;
                line-height: 1.4;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }

              .item-meta {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 13px;
                color: #64748b;

                .item-type {
                  font-weight: 500;
                  color: #6366f1;
                }

                .item-separator {
                  color: #cbd5e1;
                }

                .item-date {
                  color: #94a3b8;
                }
              }
            }

            .item-status {
              margin-left: 12px;
            }
          }
        }
      }
    }

    // 快速操作样式
    &.quick-actions {
      .quick-actions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;

        .action-item {
          display: flex;
          align-items: center;
          padding: 20px;
          border: 1px solid #f1f5f9;
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          background: #fafafa;

          &:hover {
            border-color: #6366f1;
            background: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
          }

          .action-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            flex-shrink: 0;

            &.primary {
              background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
              box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.3);
            }

            &.success {
              background: linear-gradient(135deg, #10b981 0%, #059669 100%);
              box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.3);
            }

            &.info {
              background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
              box-shadow: 0 4px 14px 0 rgba(107, 114, 128, 0.3);
            }

            &.warning {
              background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
              box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.3);
            }

            .el-icon {
              font-size: 24px;
              color: white;
            }
          }

          .action-content {
            .action-title {
              font-size: 15px;
              font-weight: 600;
              color: #1e293b;
              margin-bottom: 4px;
            }

            .action-desc {
              font-size: 13px;
              color: #64748b;
              line-height: 1.4;
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .dashboard-container {
    padding: 16px;
  }

  .main-content {
    .content-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 12px;
  }

  .dashboard-header {
    margin-bottom: 24px;

    .header-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding: 20px;

      .welcome-info {
        .welcome-title {
          font-size: 24px;
        }
      }
    }
  }

  .stats-section {
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
  }

  .main-content {
    .content-card {
      &.quick-actions {
        .quick-actions-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .stats-section {
    .stats-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>
